//后台配置/数据配置
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Divider, Spin, Collapse, message } from 'antd';
import style from './VideoDay.less';
import update from 'immutability-helper';
//引入字体图标组件
import { DragDropContext } from 'react-dnd';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import MyIcon from "../../components/common/MyIcon";
import request from '../../utils/request';
import PublicService from '../../services/PublicService';
import styles from './VideoDay.less';
import moment from 'moment'
import Dustbin from './component/Dustbin';
import Box from './component/Box';
const Panel = Collapse.Panel;
class VideoDay extends Component {
  state = {
    width: '100%',
    num: 12,
    height: '41vh',
    video: '37.5vh',
    color: '#666',//文字颜色
    color1: '#3C97FF',//文字颜色
    color2: '#666',//文字颜色
    dustbins1: [
      { accepts: ['true'], open: false, controls: true },//type:GLASS,FOODP,APER
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
      { accepts: ['true'], open: false, controls: true },
    ],
    dustbins: [
      { accepts: ['true'], open: false, controls: true, padding: '0 0.5vw 0 1vw', marginTop: '1vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 1vw 0 0.5vw', marginTop: '1vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 0.5vw 0 1vw', marginTop: '1.5vh' },
      { accepts: ['true'], open: false, controls: true, padding: '0 1vw 0 0.5vw', marginTop: '1.5vh' },
    ],
    videoList: true,
    boxes: [
      {
        title: '项目部',
        sub: [
          { name: '场地东南侧', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_1', cameraCode: 'cddnc' },
          { name: '水处理东侧', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_2', cameraCode: 'scldc' },
          { name: '清水池', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_3', cameraCode: 'qsc' },
          { name: '场地西南侧', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_4', cameraCode: 'cdxnc' },
          { name: '大门枪机', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_5', cameraCode: 'dmqj' },
          { name: '项目部球机', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_6', cameraCode: 'xmbqj' }
        ],
      },
      {
        title: '项目现场',
        sub: [
          { name: '硫酸储罐', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_7', cameraCode: 'lscg' },
          { name: '场地西北侧', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_8', cameraCode: 'cdxc' },
          { name: '水处理', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_9', cameraCode: 'scl' },
          { name: '水处理2', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_10', cameraCode: 'scl2' },
          { name: '东侧大门', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_11', cameraCode: 'dcdm' },
          { name: '污水池', type: 'true', url: 'rtmp://118.31.239.132:10935/hls/stream_12', cameraCode: 'wsc' }
        ],
      }

    ],
    droppedBoxNames: [],
    loading: false,
    options: [],
    request: null,
  };
  componentDidMount() {
    let t = this;
    t.setState({
      loading: true,
    });
    t.onclick(1);
    let projectCompanyId = t.getQueryString('projectCompanyId');
    console.log("projectCompanyId:", projectCompanyId)

  }

  componentWillUnmount() {
    clearInterval(this.state.request);
  }
  //获取url参数
  getQueryString(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.href.substr(1).match(reg);
    if (r !== null) {
      return unescape(r[2]);
    }
    return null;
  }
  //分屏切换
  onclick(number) {
    let t = this;
    let splic = [...t.state.dustbins1].slice(0, number);
    if (number === 1) {
      splic[0].padding = '0 1vw 0 1vw',
        splic[0].marginTop = '1vh',
        this.setState({
          dustbins: splic,
          height: '84vh',
          video: '80vh',
          num: 24,
          color: '#3C97FF',
          color1: '#666',
          color2: '#666',
        })
    }
    if (number === 4) {
      splic[0].padding = '0 0.5vw 0 1vw', splic[0].marginTop = '1vh',
        splic[1].padding = '0 1vw 0 0.5vw', splic[1].marginTop = '1vh',
        splic[2].padding = '0 0.5vw 0 1vw', splic[2].marginTop = '1.5vh',
        splic[3].padding = '0 1vw 0 0.5vw', splic[3].marginTop = '1.5vh',
        this.setState({
          dustbins: splic,
          num: 12,
          height: '41vh',
          video: '37.5vh',
          color1: '#3C97FF',
          color: '#666',
          color2: '#666',
        })
    }
    if (number === 9) {
      splic[0].padding = '0 0.5vw 0 1vw', splic[0].marginTop = '1vh',
        splic[1].padding = '0 0.5vw 0 0.5vw', splic[1].marginTop = '1vh',
        splic[2].padding = '0 1vw 0 0.5vw', splic[2].marginTop = '1vh',
        splic[3].padding = '0 0.5vw 0 1vw', splic[3].marginTop = '1.5vh',
        splic[4].padding = '0 0.5vw 0 0.5vw', splic[4].marginTop = '1.5vh',
        splic[5].padding = '0 1vw 0 0.5vw', splic[5].marginTop = '1.5vh',
        splic[6].padding = '0 0.5vw 0 1vw', splic[6].marginTop = '1.5vh',
        splic[7].padding = '0 0.5vw 0 0.5vw', splic[7].marginTop = '1.5vh',
        splic[8].padding = '0 1vw 0 0.5vw', splic[8].marginTop = '1.5vh',
        this.setState({
          dustbins: splic,
          num: 8,
          height: '27vh',
          video: '24vh',
          color2: '#3C97FF',
          color: '#666',
          color1: '#666',
        })
    }
  }
  //鼠标松开事件
  /**
   *  参数(@index 容器的下标  @item 拖动的name  @box 携带播放所需的信息)
   **/
  handleDrop(index, item, box) {
    console.log(index, item, box)
    let t = this;
    /*
    * 此处t.setState执行两个参数，t.setState(update(this.state,{}),()=>{})
    * 第一个参数用于关闭播放器
    * 第二个参数用于开启播放器并更新播放的相关信息
    * update 扩展不变的数据（immutability-helper） 可参考github地址:https://github.com/kolodny/immutability-helper
    * {$set: any} 直接赋值覆盖
    * {$push: array} 数组中的push()语法
    * */
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open: {
              $set: false,
            }
          },
        }
      }),
      () => {
        const { name } = item;
        let params = {};
        for (let i = 0; i < box.length; i++) {
          box[i].sub.map(item => {
            if (item.name === name) {
              params.cameraCode = item.cameraCode

            }
          })
        };
        console.log(params)
        // fetch('rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp')
        // .then(res)
        // .then(parseJSON)
        // .then(data => {
        //   return data
        // })
        // .catch(err => ({err}));
        request({
          url: `/web/redstar/visCamera/getVideoUrlByCode?cameraCode=${params.cameraCode}`,
          method: 'GET',
        }).then(data => {
          if (data.rc === 0) {

            const droppedBoxNames = name ? { $push: [name] } : {};
            this.setState(
              update(this.state, {
                dustbins: {
                  [index]: {
                    lastDroppedItem: {
                      $set: data.ret,
                    },
                    name: {
                      $set: name,
                    },
                    open: {
                      $set: true,
                    }
                  },
                },
                droppedBoxNames,
              }),
            )

            // })
            // .catch(error => {
            //   var i= 0
            //   message.warning("您当前网络较差,加载缓慢,请耐心等待!")
            //   var fetchHttp = setInterval(() => {
            //     i++
            //     if (i > 9) {
            //       return message.warning("视频加载失败")
            //       clearInterval(fetchHttp)
            //     }
            //     fetch(data.data.ret)
            //       .then(response => {


            //         if (response.status == 200) {

            //           const droppedBoxNames = name ? { $push: [name] } : {};
            //           this.setState(
            //             update(this.state, {
            //               dustbins: {
            //                 [index]: {
            //                   lastDroppedItem: {
            //                     $set: data.data.ret,
            //                   },
            //                   name: {
            //                     $set: name,
            //                   },
            //                   open: {
            //                     $set: true,
            //                   }
            //                 },
            //               },
            //               droppedBoxNames,
            //             }),
            //           )

            //           clearInterval(fetchHttp)

            //         }

            //       })
            //   }, 1000)


            // });

          }

        })


        //   if (data.rc === 0){
        // let playUrl = data.ret;

        // }
        //   else {
        //     message.error(data.err)
        //   }
        // });
      }
    )
  }
  isDropped(boxName) {
    return this.state.droppedBoxNames.indexOf(boxName) > -1;
  }





  onClose(index) {
    console.log(index)
    let t = this;
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open: {
              $set: false,
            },
            name: {
              $set: '',
            },
          },
        }
      })
    )
  }

  render() {
    let t = this;
    const { boxes, dustbins, color, color1, color2, options, videoList, projectCompanyId } = t.state;
    const items = [
      {
        type: 'select',
        label: '项目选取',
        paramName: 'projectCompanyId',
        options: options,
        initialValue: projectCompanyId ? projectCompanyId : '',
        style: true,
      }
    ];

    return (
      <div>
        {/* <Filtrate items={items} ref={ref=>t.f1=ref} 
           
              clearBtn={'hide'}/> */}
        <Row gutter={12} style={{ clear: 'both', height: '79.5vh' }}>
          <Col xs={20} sm={20} md={20} lg={20} xl={20}>
            <div className={styles['wp-video']} style={{ clear: 'both' }}>
              <Row style={{ marginTop: '1vh' }}>
                <Col span={2}>
                  <div className={styles.blueBlock}><i></i><span>实时监控</span></div>
                </Col>
                <Col span={22} style={{ textAlign: 'right', paddingRight: '1vw' }}>
                  <span
                    onClick={t.onclick.bind(t, 1)}
                    style={{ color, cursor: 'pointer' }}><MyIcon type="icon-icon-screen-one" style={{ paddingRight: '0.4vw', color, fontSize: '0.8vw' }} />一分屏</span>
                  <Divider type="vertical" />
                  <span
                    onClick={t.onclick.bind(t, 4)}
                    style={{ color: color1, cursor: 'pointer' }}><MyIcon type="icon-sifenping" style={{ paddingRight: '0.4vw', color: color1, fontSize: '0.8vw' }} />四分屏</span>
                  <Divider type="vertical" />
                  <span
                    onClick={t.onclick.bind(t, 9)}
                    style={{ color: color2, cursor: 'pointer' }}><MyIcon type="icon-icon-screen-nine" style={{ paddingRight: '0.4vw', color: color2, fontSize: '0.8vw' }} />九分屏</span>
                </Col>
              </Row>
              <Row >
                {
                  dustbins.map(({ accepts, lastDroppedItem, name, padding, marginTop, open, controls, }, index) => (
                    <Col key={index} md={t.state.num} lg={t.state.num} xl={t.state.num}>
                      <Dustbin
                        key={index}
                        onClose={t.onClose.bind(t, index)}
                        load={t.state.load}
                        name={name}
                        padding={padding}
                        controls={controls}
                        open={open}
                        accepts={accepts}
                        lastDroppedItem={lastDroppedItem}
                        marginTop={marginTop}
                        width={t.state.width}
                        height={t.state.height}
                        video={t.state.video}
                        onDrop={item => this.handleDrop(index, item, t.state.boxes)}
                      />
                    </Col>
                  ))
                }
              </Row>
            </div>
          </Col>
          <Col xs={4} sm={4} md={4} lg={4} xl={4}>
            <div className={styles['wp-video']}>
              <div className={styles.blueBlock} style={{ paddingTop: '10px' }}><i></i><span>视频列表</span></div>
              {
                !videoList &&
                <Row>
                  <div style={{ height: '60vh', overflow: 'auto', marginTop: '10px', lineHeight: '60vh', textAlign: 'center' }}>
                    暂无视频
                        </div>
                </Row>
              }
              {
                videoList &&
                <Row>
                  <div style={{ height: '60vh', overflow: 'auto', marginTop: '10px' }}>
                    <Collapse defaultActiveKey={['1']} bordered={false} accordion >
                      <Panel header="项目部" key="1" style={{ border: 0, color: '#1A1A1A', fontSize: '14px', fontWeight: 'bold', }}>
                        {
                          boxes[0].sub.map(({ name, type, url }, index) => (
                            <Box
                              key={index}
                              name={name}
                              type={type}
                              isDropped={this.isDropped(type)}
                            />
                          ))
                        }
                      </Panel>
                      <Panel header="项目现场" key="2" style={{ border: 0, color: '#1A1A1A', fontSize: '14px', fontWeight: 'bold', }}>
                        {
                          boxes[1].sub.map(({ name, type, url }, index) => (
                            <Box
                              key={index}
                              name={name}
                              type={type}
                              isDropped={this.isDropped(type)}
                            />
                          ))
                        }
                      </Panel>

                    </Collapse>
                  </div>
                </Row>
              }
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
  };
}
export default connect(mapStateToProps)(DragDropContext(HTML5Backend)(VideoDay));